<template>
  <div class="add">
    <el-form
      ref="setForm"
      label-position="top"
      v-model="workerInfo"
      class="form"
    >
      <el-form-item label="用户名">
        <el-input v-model="workerInfo.username" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input
          type="password"
          v-model="workerInfo.password"
          placeholder="密码"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="workerInfo.nickname" placeholder="昵称"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="workerInfo.gender">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="workerInfo.phone" placeholder="联系电话"></el-input>
      </el-form-item>
      <el-form-item label="入职部门">
        <el-radio-group v-model="workerInfo.department">
          <el-radio label="客服部">客服部</el-radio>
          <el-radio label="技术部">技术部</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="员工头像" class="float">
        <img v-if="myAvatar" id="upAvatar" :src="myAvatar" alt="" />
        <i v-else class="el-icon-plus avatar-uploader-icon i"></i>
        <el-upload
          id="avatarUpload"
          ref="avatarUpload"
          class="avatar-uploader"
          action=""
          :show-file-list="false"
          :on-change="handleAddChange"
          accept=".png,.jpg,.jpeg"
          :limit="1"
          :auto-upload="false"
          :http-request="handleFileUpload"
        >
          <el-button slot="trigger" type="primary">点击上传</el-button>
          <el-button @click="submitUpload()" style="display: none"
            >上传到服务器</el-button
          >
        </el-upload>

        <p>只能上传JPG/PNG图片</p>
      </el-form-item>
      <el-button type="primary" @click="formSubmit()">添加员工</el-button>
    </el-form>
  </div>
</template>

<script>
import { addWorker,uploadAvatar } from "@/api/manager";
export default {
  data() {
    return {
      workerInfo: {},
      myAvatar: "",
      avatarInfo: [],
    };
  },
  mounted() {},
  methods: {
    // 头像上传
    // 上传前
    handleAddChange(file, fileList) {
      // console.log(file);
      // this.$refs.avatarUpload.clearFiles();
      const isType =
        file.raw.type === "image/jpeg" ||
        file.raw.type === "image/jpg" ||
        file.raw.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isType) {
        this.$message.error("上传头像图片只能是 JPG/JPEG/PNG 格式!");
      } else if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      // return isType && isLt2M;
      else {
        this.avatarInfo = fileList;
        this.myAvatar = URL.createObjectURL(file.raw);
      }
    },
    // 上传
    submitUpload() {
      this.$refs.avatarUpload.submit();
      // setTimeout(function(){
      //   console.log(this.userInfo.avatar)

      // },100)
    },
    // 自定义上传
    handleFileUpload(fileObject) {
      let fd = new FormData();
      fd.append("file", fileObject.file);
      uploadAvatar(fd).then((res) => {
        // console.log(res);
        this.workerInfo.avatar = res.data.name;
      });
    },
    // 表单上传
    formSubmit() {
      var that = this;
      this.submitUpload();
      setTimeout(function () {
        addWorker(that.workerInfo).then((res) => {
          if (res.data.success == "ok") {
            res.msg = "添加成功！";
            // console.log(res);
          }
        });
        alert("添加成功！");
        window.location.reload();
      }, 100);
    },
    // 日期格式化
    formatDate1(dateint) {
      var date = new Date(parseInt(dateint));
      var str = date.getFullYear() + "-";
      if (date.getMonth() < 10) {
        str += "0";
      }
      str += date.getMonth() + 1 + "-";
      if (date.getDate() < 10) {
        str += "0";
      }
      str += date.getDate() + " ";
      if (date.getHours() < 10) {
        str += "0";
      }
      str += date.getHours() + ":";
      if (date.getMinutes() < 10) {
        str += "0";
      }
      str += date.getMinutes() + ":";
      if (date.getSeconds() < 10) {
        str += "0";
      }
      str += date.getSeconds();
      return str;
    },
    // 日期格式化 年月日
    formatDate2(dateint) {
      var date = new Date(parseInt(dateint));
      var str =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      return str;
    },
  },
};
</script>

<style lang='scss' scoped>
.add {
  width: 900px;
  height: 850px;
  background-color: rgb(242, 242, 242);
  margin: auto;
  position: relative;
  top: 25px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 30px 100px 0;
  .title {
    font-size: 30px;
  }
  .form {
    width: 100%;
    .el-form-item {
      width: 300px;
    }
    .float {
      width: 160px;
      height: 250px;
      text-align: center;
      position: absolute;
      right: 80px;
      top: 70px;
      img {
        width: 150px;
        height: 150px;
      }
      .i {
        width: 150px;
        height: 150px;
        font-size: 28px;
        line-height: 150px;
        text-align: center;
        border: 1px solid black;
      }
      .avatar-uploader{
        margin-top: 10px;
      }
      p {
        color: gray;
        font-size: 14px;
      }
    }
  }
}
</style>